<template>
  <div>
    <AppHeader></AppHeader>

    <PageContainer>
      <div class="search text-brand rounded overflow-hidden mb-8">
        <div class="hd flex mb-3">
          <div class="tit">筛选</div>
          <a class="flex items-center ml-auto cursor-pointer text-sm">
            <img
              class="mr-2 w-[15px] h-[16px]"
              src="@/assets/remove.png"
              alt=""
            />
            清空所选分组
          </a>
        </div>
        <div class="bd bg-white">
          <dl class="group" v-for="i in 3" :key="i">
            <dt class="label">图书/古籍</dt>
            <div class="values">
              <dd class="value active"><a>全部</a></dd>
              <dd class="value"><a>全部</a></dd>
              <dd class="value"><a>全部</a></dd>
            </div>
          </dl>
        </div>
      </div>

      <div class="list">
        <router-link
          :to="{ name: 'Detail', params: { id: 1 } }"
          class="item relative py-8 px-10 bg-white rounded overflow-hidden flex mb-7 cursor-pointer"
          v-for="i in 3"
          :key="i"
        >
          <div class="thumb w-[170px] mr-8" v-if="i === 1">
            <div
              class="book-cover"
              style="background-image: url(https://placeimg.com/300/200/tech)"
            ></div>
          </div>
          <div class="content flex-auto">
            <div class="hd mb-4 -mt-1">
              <span class="tag mr-1 text-brand text-sm">[图书]</span>
              <span class="tit font-bold"
                >Lorem ipsum dolor sit amet, consectetur.</span
              >
            </div>
            <dl class="meta">
              <div>
                <dt>责任者：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
              <div>
                <dt>创作时间：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
              <div>
                <dt>创作地点：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
              <div>
                <dt>内容：</dt>
                <dd>Lorem ipsum dolor sit amet.</dd>
              </div>
            </dl>
          </div>
          <div class="mark"><span class="select-none">图表</span></div>
        </router-link>
      </div>
    </PageContainer>
  </div>
</template>

<style lang="less" scoped>
.list {
  position: relative;

  .mark {
    position: absolute;
    top: 0;
    right: 0;

    span {
      position: relative;
      z-index: 1;
      top: 10px;
      left: -10px;
      color: #8a6e49;
      font-size: 12px;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      border-width: 40px;
      border-style: solid;
      border-color: #edd7ba #edd7ba transparent transparent;
    }
  }
}
</style>
